<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="详情" left-arrow @click-left="$router.back()">
                <template #right>
                    <van-icon name="ellipsis" size="22" />
                </template>
            </van-nav-bar>
        </header>
        <div class="content">
            <div><img style="width:100%" :src="detailInfo.image" alt=""></div>
            <div>{{ detailInfo.title }}</div>
            <p style="color:red"> ￥{{ detailInfo.price }} 元</p>
        </div>
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
    </div>
    <footer class="footer">
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" dot />
            <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
            <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </footer>
</template>

<script setup>
import request from '@/utils/request.js'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router' // 1.引入useRoute 
const route = useRoute() // 2. 调用useRoute()获取路由信息存到route变量中
const router = useRouter()
const detailInfo = ref({})
const showShare = ref(false)
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    // { name: '复制链接', icon: 'link' },
    // { name: '分享海报', icon: 'poster' },
    // { name: '二维码', icon: 'qrcode' },
]
onMounted(() => {
    request.get('/detail', {
        params: {
            id: route.params.id // 3.使用route.params.id 拿到 浏览器地址栏中的id
        }
    }).then(res => {
        if (res.data.code == 200) {
            detailInfo.value = res.data.data
        }
    })
})
const addCart = () => {
    if (localStorage.getItem('token')) {
        // 说明已经登录
        console.log('已经登录')
    } else {
        // 说明未登录
        // 跳转到登录页面
        router.push('/login')
    }
}
</script>